<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragment::head('kkblog-话题')">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>话题</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="../static/layui/layui.css" rel="stylesheet">
    <link href="../static/css/myui.css" rel="stylesheet">
    <link href="../static/css/preview.css" rel="stylesheet">
</head>
<body>
<div style="background: rgb(47,54,60)" th:replace="_fragment::navigate(${user}, 1)">
    <div class="layui-container" style="display:flex;position: relative">
        <div class="myui-logo-container">
            <img style="width: 80%;height: 80%;border-radius: 5px" src="https://unpkg.com/outeres@0.0.10/demo/avatar/1.jpg">
        </div>
        <ul class="layui-nav" style="margin-left: -10px">
            <li class="layui-nav-item">
                <a href="" class="layui-font-18" style="">话题</a>
            </li>
            <li class="layui-nav-item">
                <a href="" class="layui-font-18">文章</a>
            </li>
            <li class="layui-nav-item">
                <a href="" class="layui-font-18">Gitee</a>
            </li>
            <li class="layui-nav-item">
                <a href="" class="layui-font-18">Github</a>
            </li>
        </ul>
        <div style="position: absolute;right: 50px;margin-top: 10px">
            <div style="display: flex">
                <a class="layui-btn" style="margin-right: 20px">
                    <i class="layui-icon layui-icon-add-1"></i>
                    登录</a>
                <button class="layui-btn" id="post-button" style="margin-right: 20px">
                    <i class="layui-icon layui-icon-add-1"></i>
                    发表</button>
                <a href="javascript:;" class="myui-font-color-gray" id="user-info">
                    <img src="https://unpkg.com/outeres@0.0.10/demo/avatar/1.jpg" style="border-radius: 50%;width: 35px;height: 35px ">
                    <span class="layui-font-14" style="color: whitesmoke">小小可小可小可小可小可可</span>
                    <i class="layui-icon layui-icon-down" style="color: whitesmoke"></i>
                </a>
            </div>
        </div>
    </div>
</div>

<div class="layui-container" style="margin-top: 10px;">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md2" style="position: sticky!important;top: 65px">
            <div class="layui-panel">
                <ul class="layui-menu" id="docDemoMenu1" th:replace="_fragment::topic(${topics})">
                    <li lay-options="{id: 100}">
                        <div class="myui-menu-body-title">
                            <img class="myui-top-image" src="https://unpkg.com/outeres@0.0.10/demo/avatar/1.jpg">
                            <span class="myui-topic-name">最新</span>
                        </div>
                    </li>
                    <li lay-options="{id: 100}">
                        <div class="myui-menu-body-title myui-active">
                            <img class="myui-top-image" src="https://unpkg.com/outeres@0.0.10/demo/avatar/1.jpg">
                            <span class="myui-topic-name">推荐</span>
                        </div>
                    </li>
                    <li lay-options="{id: 100}">
                        <div class="myui-menu-body-title">
                            <img class="myui-top-image" src="https://unpkg.com/outeres@0.0.10/demo/avatar/1.jpg">
                            <span class="myui-topic-name">最新</span>
                        </div>
                    </li>
                    <li lay-options="{id: 100}">
                        <div class="myui-menu-body-title">
                            <img class="myui-top-image" src="https://unpkg.com/outeres@0.0.10/demo/avatar/1.jpg">
                            <span class="myui-topic-name">最新</span>
                        </div>
                    </li>
                    <li lay-options="{id: 100}">
                        <div class="myui-menu-body-title">
                            <img class="myui-top-image" src="https://unpkg.com/outeres@0.0.10/demo/avatar/1.jpg">
                            <span class="myui-topic-name">最新</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="layui-col-md7" id="image-list-container">
            <div class="layui-card myui-card" th:each="dynamic : ${dynamics}">
                <div class="myui-avatar-container">
                    <img th:src="@{${dynamic.avatar}}" th:onclick="|window.location.href='/user/' + ${dynamic.userId}|"  src="https://unpkg.com/outeres@0.0.10/demo/avatar/1.jpg" class="myui-avatar-middle">
                </div>
                <div class="layui-card-body" style="width: 100%">
                    <div class="myui-card-header">
                        <a class="myui-nickname myui-a-tag"  th:onclick="|window.location.href='/user/' + ${dynamic.userId}|" th:text="${dynamic.nickname}">民数</a>
                        <span class="myui-top-tip" th:if="${dynamic.stick == 1}">置顶</span>
                        <span class="myui-time-tip" th:text="${'发布于 ' + #thJson.parseTimeDescription(dynamic.createTime)}">发布于2024-23-12 12:12:21</span>
                    </div>
                    <a class="myui-card-titler" target="_blank" href="http://localhost:8080" th:if="${dynamic.type == 1}" th:text="${dynamic.title}" th:onclick="|window.open('/dynamic/${dynamic.id}', '_blank')|">
                        Go 语言社区系统 BBS-GO 4.0.0 发布，升级vue3、nuxt3
                    </a>
                    <div class="myui-card-content" th:text="${dynamic.preView}" th:onclick="|window.open('/dynamic/${dynamic.id}', '_blank')|">
                        卡片式面板面板通常用于非白色背景色的主体内
                        从而映衬出边框投影卡片式面板面板通常用于非白色背景色的主体内
                        从而映衬出边框投影卡片式面板面板通常用于非白色背景色的主体内
                        从而映衬出边框投影卡片式面板面板通常用于非白色背景色的主体内
                        从而映衬出边框投影卡片式面板面板通常用于非白色背景色的主体内
                        从而映衬出边框投影
                    </div>
                    <ul class="myui-image-ul layui-row">
                        <li class="myui-image-li" th:each="image : ${#thJson.parseStringArray(dynamic.imageList)}">
                            <img class="myui-list-image" th:src="${image}" src="https://picsum.photos/400">
                        </li>
                    </ul>
                    <div class="myui-card-footer">
                        <div class="myui-gap" th:classappend="${dynamic.liked ? 'active' : ''}" th:id="${'like-gap-' + dynamic.id}" th:onclick="|doLikeOrUnlike(${dynamic.id})|">
                            <i class="layui-icon layui-icon-star-fill myui-like-icon"></i>&nbsp;点赞&nbsp;<span th:text="${dynamic.likeNumber}" th:id="${'like-number-' + dynamic.id}">2121</span>
                        </div>
                        <div  class="myui-gap" th:onclick="|window.open('/dynamic/${dynamic.id}', '_blank')|">
                            <i class="layui-icon layui-icon-reply-fill"></i>&nbsp;评论&nbsp;<span th:text="${dynamic.commentNumber}">2121</span>
                        </div>
                        <div  class="myui-gap" th:onclick="|window.open('/dynamic/${dynamic.id}', '_blank')|">
                            <i class="layui-icon layui-icon-read"></i>&nbsp;浏览&nbsp;<span th:text="${dynamic.viewNumber}">2121</span>
                        </div>
                        <div class="myui-topic-tip" th:text="${dynamic.topicName}">开源</div>
                    </div>
                </div>
            </div>
            <div class="layui-row" style="justify-content: center;display: flex" id="load-more-btn-area">
                <button th:classappend="${#lists.size(dynamics) < 8 ? 'myui-hide' : ''}" id="load-more-btn" class="layui-btn layui-btn-xs">点击加载更多</button>
                <button th:classappend="${#lists.size(dynamics) >= 8 ? 'myui-hide' : ''}" id="load-all" class="layui-btn layui-btn-xs layui-btn-primary">已经到底咯~</button>
            </div>
        </div>
        <div class="layui-col-md3">

            <th:block th:replace="_fragment::checkPanel(${dailyCheck}, ${checkUsers}, ${user})"></th:block>

            <div class="layui-card">
                <div class="layui-card-header myui-side-title">公告</div>
                <div class="layui-card-body">
                    欢迎访问kkblog开发社区，目前属于demo版本，欢迎注册留言
                </div>
            </div>

            <div class="layui-card myui-side-card">
                <div class="layui-card-header myui-side-title">积分排行</div>
                <div class="layui-card-body">
                    <div class="layui-row" style="margin-bottom: 5px" th:each="u,stat:${ranks}">
                        <div class="layui-col-md2" style="padding-top: 1%">
                            <img class="myui-avatar-small" style="margin: auto;display: block" th:onclick="|window.location.href='/user/' + ${u.id}|" th:src="@{${u.avatar}}" src="https://unpkg.com/outeres@0.0.10/demo/avatar/1.jpg">
                        </div>
                        <div class="layui-col-md7" style="text-align: left">
                            <a class="layui-row layui-font-14 myui-a-tag" th:href="@{'/user/' + ${u.id}}" th:text="${u.nickname}">秋天的落叶</a>
                            <div class="layui-row layui-font-12" style="color: #6c6c70"><span th:text="${u.dynamicNumber}">212</span> 帖子 • <span th:text="${u.commentNumber}">12</span> 评论</div>
                        </div>
                        <div class="layui-col-md3 layui-font-14" style="display: flex;padding-top: 2%;color: #6c6c70">
                            <i class="layui-icon layui-icon-dollar" style="font-size: 14px"></i>&nbsp;
                            <span th:text="${u.scores}">32212</span>
                        </div>
                        <hr>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="layui-row" style="margin-top: 30px;margin-bottom: 20px;text-align: center;color: darkgrey" th:replace="_fragment::footer">
    © 2024 Powered by Derek
</div>


<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<div th:replace="_include::image-preview">
    <script src="../static/layui/layui.js"></script>
    <script src="../static/image_preview/pre.js"></script>
</div>

<script th:inline="javascript">
    let user = [[${user}]]
    let dynamics = [[${dynamics}]]
    let topics = [[${topics}]]
    let pageNum = 1;
    let doLikeOrUnlike = function (id) {
         if (user === undefined || user === null) {
             layer.open({
                 title: '系统提示'
                 ,content: '请登录后进行操作'
             });
             return;
         }
        if($('#like-gap-' + id).hasClass('active')) {
            $.get('/dynamic/unlike?dynamicId=' + id, function(res) {
                if (res.code === 200){
                    layer.msg('取消点赞成功！', {icon: 1}, function(){});
                    $('#like-gap-' + id).removeClass('active')
                    $('#like-number-' + id).text(Number($('#like-number-' + id).text()) - 1);
                } else {
                    layer.open({
                        title: '系统提示'
                        ,content: res.msg
                    });
                }
            });
        } else {
            $.get('/dynamic/like?dynamicId=' + id, function(res) {
                if (res.code === 200) {
                    layer.msg('点赞成功！', {icon: 1}, function(){});
                    $('#like-gap-' + id).addClass('active')
                    $('#like-number-' + id).text(Number($('#like-number-' + id).text()) + 1);
                } else {
                    layer.open({
                        title: '系统提示'
                        ,content: res.msg
                    });
                }
            });
        }
    }
    
    $(document).ready(function () {
        $('#load-more-btn').on('click', function () {
            let topicId;
            for (let i = 0; i < topics.length; i++) {
                if (topics[i].selected) {
                    topicId = topics[i].id;
                    break;
                }
            }
            let dynamicId = dynamics[dynamics.length - 1].id
            $.get('/index/more?dynamicId=' + dynamicId + "&topicId=" + topicId + "&pageNum=" + pageNum, function(res) {
                if (res.code === 200) {
                    pageNum ++;
                    dynamics = res.data;
                    let html = ""
                    for(let i = 0; i < res.data.length; i++) {
                        html += genDynamicHtml(res.data[i])
                    }
                    $('#load-more-btn-area').before(html)
                    if (res.data.length < 8) {
                        $('#load-more-btn').addClass('myui-hide')
                        $('#load-all').removeClass('myui-hide')
                    }
                } else {
                    layer.open({
                        title: '系统提示'
                        ,content: res.msg
                    });
                }
            });
        })
    })
    
    let genDynamicHtml = function (dynamic) {
        let stick = dynamic.stick ? "<span class='myui-top-tip'>置顶</span>" : "";
        let tile = dynamic.type === 0 ? '' : ("<a class='myui-card-titler' target='_blank' href='http://localhost:8080' onclick='window.open(\"/dynamic/" + dynamic.id + "\", \"_blank\")'>" + dynamic.title + "</a>");
        let images = JSON.parse(dynamic.imageList);
        let imageHtml = ""
        if (images != null) {
            for(let i = 0; i < images.length; i++) {
                imageHtml += "<li class='myui-image-li' >" +
                    "    <img class='myui-list-image' src='" + images[i] + "'>" +
                    "</li>";
            }
        }
        let liked = dynamic.liked ? "active" : "";
        return  "<div class='layui-card myui-card' th:each='dynamic : ${dynamics}'>" +
            "                <div class='myui-avatar-container'>" +
            "                    <img onclick='window.location.href=\"/user/" + dynamic.userId + "\"' src='" + dynamic.avatar + "' class='myui-avatar-middle'>" +
            "                </div>" +
            "                <div class='layui-card-body' style='width: 100%'>" +
            "                    <div class='myui-card-header'>" +
            "                        <a onclick='window.location.href=\"/user/" + dynamic.userId + "\"' class='myui-nickname myui-a-tag'>" + dynamic.nickname + "</a>"
            + stick +
            "                        <span class='myui-time-tip'>发布于 " + dynamic.createTime + "</span>" +
            "                    </div>"
            + tile +
            "                    <div class='myui-card-content' onclick='window.open(\"/dynamic/ " + dynamic.id + "\", \"_blank\")'>"
            + dynamic.preView +
            "                    </div>" +
            "                    <ul class='myui-image-ul layui-row'>"
             + imageHtml +
            "                    </ul>" +
            "                    <div class='myui-card-footer'>" +
            "                        <div class='myui-gap " + liked + "' id='like-gap-" + dynamic.id + "' onclick='doLikeOrUnlike(" + dynamic.id + ")'>" +
            "                            <i class='layui-icon layui-icon-star-fill myui-like-icon'></i>&nbsp;点赞&nbsp;<span id='like-number-" + dynamic.id + "'>" +
            dynamic.likeNumber + " </span>" +
            "                        </div>" +
            "                        <div  class='myui-gap'>" +
            "                            <i class='layui-icon layui-icon-reply-fill'></i>&nbsp;评论&nbsp;<span th:text='${dynamic.commentNumber}'>" + dynamic.commentNumber + "</span>" +
            "                        </div>" +
            "                        <div  class='myui-gap'>" +
            "                            <i class='layui-icon layui-icon-read'></i>&nbsp;浏览&nbsp;<span th:text='${dynamic.viewNumber}'>" + dynamic.viewNumber + "</span>" +
            "                        </div>" +
            "                        <div class='myui-topic-tip'>" + dynamic.topicName + "</div>" +
            "                    </div>" +
            "                </div>" +
            "            </div>"
    }
</script>
</script>
</body>
</html>